<template>
    <div class="body">
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">
           
            </h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="亲，请输入用户名" >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="亲，请输入密码" >
                </el-input>
            </el-form-item>
            <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
            <el-button type="primary" style="width:100%" @click="submitForm()">登录</el-button>
        </el-form>
    </div>
</template>

<script>
import $http from '@/http/base';
import CryptoJS from "crypto-js";
export default {
  name: "Login",
    data(){
      return{
          captchaUrl: "",
          loginForm:{
              username:"",
              password:"",
              code:'',
              key:"", // 密钥
                Passwordjmxx:"",
                passwordmw:"",//解密后的明文
                ZSname:"",
                uid:"",
          },
          checked: true,
          rules:{
              username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 5, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }
              ],
              password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 6,  message: '密码长度要大于6', trigger: 'blur' }],
          }

      }
  },
    methods:{
      //提交登录
      submitForm() { 
            if(this.loginForm.username != "" && this.loginForm.password != ""){
                $http
                .get('api/rbac_User/UserSelect?uname='+this.loginForm.username)
                .then(res =>{
                    console.log("查询的结果为:")
                    console.log(res)
                    console.log(res.u_Password)
                    this.decrypt(res.u_Password);
                    this.ZSname = res.u_Name;
                    this.uid = res.u_Id;
                    this.passwordmw = this.Passwordjmxx;
                    console.log("解密信息" + this.passwordmw);
                    console.log("输入信息" + this.loginForm.password);

                    if(JSON.stringify(this.passwordmw) == JSON.stringify(this.loginForm.password))
                    {
                         //主页跳转
                        this.$message({
                            message: "登陆成功",
                            type: "success",
                        });
                        //用户真实姓名存储
                        localStorage.setItem("UName", this.ZSname);
                        //用户id存储

                        this.$router.push("mainba");
                    }else{
                        this.$message.error("账号或密码错误");
                    }
                })
            }
        },
        //解密方法
        decrypt(xx) {
            // 使用 AES 解密算法和 CBC 模式进行解密
            this.key = "my-secret-key"
            const decrypted = CryptoJS.AES.decrypt(xx, this.key).toString(
                CryptoJS.enc.Utf8
            );
            this.Passwordjmxx = decrypted;
            console.log(this.Passwordjmxx)
        },
    }
};
</script>

<style lang="less" scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        text-align: left;
        margin: auto;
     
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: aliceblue;
        border:1px solid blueviolet;
        box-shadow: 0 0 25px #f885ff;
    }
    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }
    .loginRemember{
        margin: 0px 0px  0px 0px;
    }
    .body {
    width: 98vw;
    height: 93vh;
    background: linear-gradient(to right,rgb(247,209,215),rgb(191,227,241));
    background-size: cover;
    background-position: center center; /* 将图片在容器中水平和垂直方向上居中显示 */
}
</style>

